<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="roleBo" class="demo-form-inline">
        <el-form-item label="角色名" label-width="70px">
          <el-input clearable v-model="roleBo.name" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item style="padding-left: 20px; padding-right: 20px" label-width="70px">
          <el-radio v-model="roleBo.status" label="0">正常</el-radio>
          <el-radio v-model="roleBo.status" label="1">锁定</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" plain @click="resetRoleBo">重置</el-button>
          <el-button type="primary" icon="el-icon-search" plain @click="queryRoleList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" plain @click="show('新增角色', 1)">新增</el-button>
        </el-form-item>
        <el-dropdown class="el-dropdown" :hide-on-click="false" @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="color: #F56C6C" command="del">删除</el-dropdown-item>
            <el-dropdown-item style="color: #E6A23C" command="change">改变状态</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-table
        :data="roleList"
        tooltip-effect="dark"
        style="width: 100%"
        height="500px"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="80">
        </el-table-column>
        <el-table-column
          type="index"
          label="#"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="角色名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="250">
          <template slot-scope="scope">
            <el-switch
              style="display: block;"
              v-model="scope.row.status"
              @change="changeStatus(scope.row.id, scope.row.status)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="正常"
              inactive-text="锁定"
              :active-value="0"
              :inactive-value="1">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini"
                       icon="el-icon-edit"
                       @click="show('修改角色', 0, scope.row.id)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <RoleAdd :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate"
             ref="addOrUpdateRef" :title="title" :tag="tag" :subData="subData"
             :menuTree="menuTree" :originName="originName"></RoleAdd>
  </div>
</template>

<script>
import RoleAdd from './RoleAdd'
import {
  changeRoleStatus,
  getRoleMenu,
  menuTree,
  multiChangeRoleStatus,
  multiDelRole,
  queryRoleList
} from '../../api/roles'

export default {
  name: 'Roles',
  data () {
    return {
      roleBo: {
        id: '',
        name: '',
        status: '0'
      },
      multipleSelection: [],
      currentPage: 1,
      size: 10,
      total: 100,
      roleList: [],
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      title: '',
      subData: {
        id: 0,
        name: '',
        status: 0,
        menus: [],
      },
      menuTree: [],
      tag: 1,
      originName: ''
    }
  },
  components: {
    RoleAdd
  },
  created () {
    this.queryRoleList()
  },
  methods: {
    // 多选框
    handleSelectionChange (selection) {
      this.multipleSelection = selection
      console.log(this.multipleSelection)
    },
    // 调整分页size
    handleSizeChange (val) {
      this.size = val
      this.queryRoleList()
    },
    // 跳转其他页
    handleCurrentChange (val) {
      console.log(val)
      this.currentPage = val
      this.queryRoleList()
    },
    // 重置查询
    resetRoleBo () {
      this.roleBo.name = ''
      this.roleBo.status = '0'
      this.queryRoleList()
    },
    // 单点改变角色状态
    changeStatus (id, status) {
      this.status = !status === false ? '1' : '0'
      let roleBo = {}
      roleBo.id = id
      roleBo.status = this.status
      changeRoleStatus(roleBo).then((data) => {
        if (data.data.code === '2000') {
          this.$message({
            message: data.data.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: data.data.msg,
            type: 'error'
          })
        }
        this.queryRoleList()
      })
    },
    // 异步请求角色列表数据
    async queryRoleList () {
      const { data } = await queryRoleList(this.currentPage, this.size, this.roleBo)
      if (data.code === '2000') {
        this.roleList = data.data.records
        this.total = data.data.total
      } else {
        this.$message({
          message: data.msg,
          type: 'error'
        })
      }
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    show (title, tag, id) {
      this.roles = []
      this.title = title
      this.tag = tag
      if (!tag) {
        this.getRoleMenu(id)
      }
      this.getMenu()
      this.addOrUpdateVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      this.addOrUpdateVisible = data !== 'false'
      this.queryRoleList()
    },
    handleCommand (command) {
      if (command === 'del') {
        this.multiDel()
      } else {
        this.multiChangeStatus()
      }
    },
    multiDel () {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: '请先勾选删除的角色',
          type: 'warning'
        })
        return
      }
      this.$confirm('此操作将永久删除角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idArray = []
        for (let i of this.multipleSelection) {
          idArray.push(i.id)
        }
        multiDelRole(idArray).then((data) => {
          if (data.data.code === '2000') {
            this.$message({
              message: data.data.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: data.data.msg,
              type: 'error'
            })
          }
          this.queryRoleList()
        })
      })
    },
    multiChangeStatus () {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: '请先勾选要改变状态的角色',
          type: 'warning'
        })
        return
      }
      this.$confirm('此操作将改变用户状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let roleStatusBos = []
        for (let i of this.multipleSelection) {
          let roleStatusBo = {}
          roleStatusBo.id = i.id
          roleStatusBo.status = i.status ^ 1
          roleStatusBos.push(roleStatusBo)
        }
        multiChangeRoleStatus(roleStatusBos).then((data) => {
          if (data.data.code === '2000') {
            this.$message({
              message: data.data.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: data.data.msg,
              type: 'error'
            })
          }
          this.queryRoleList()
        })
      })
    },
    async getMenu () {
      const { data } = await menuTree()
      this.menuTree = data.data
    },
    async getRoleMenu(id) {
      const { data } = await getRoleMenu(id)
      this.subData = data.data
      if (null !== this.subData.menus) {
        let array = []
        for (let i of this.subData.menus.split(",")) {
          array.push(Number(i))
        }
        this.subData.menus = array
      }
      this.originName = data.data.name
    }
  }
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown {
  float: right;
  padding-right: 20px;
}
</style>
